<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container sprgin">
        <select class="sprgin">
			<option value="春" class="sprgin">春意盎然</option>
			<option value="夏" class="summer">夏日绵绵</option>
			<option value="秋" class="autumn">秋风萧瑟</option>
			<option value="冬" class="winter">冬天雪地</option>
        </select>
    </div>
	<script>
	    let box = document.querySelector('.container');
	    console.log(box);
	    let ops = document.querySelectorAll('.container select option');
	    console.log(ops);
	    let sel = document.querySelector('.container select');
	    console.log(sel);
	 
	    sel.onchange = function () {
	        if (this.value === ops[0].value) {
	            box.classList.add('sprgin');
	            box.classList.remove('summer');
	            box.classList.remove('autumn');
	            box.classList.remove('winter');
	            sel.classList.add('sprgin')
	            sel.classList.remove('summer')
	            sel.classList.remove('autumn')
	            sel.classList.remove('winter')
	            console.log('鸟');
	        } else if (this.value === ops[1].value) {
	            box.classList.add('summer');
	            box.classList.remove('sprgin');
	            box.classList.remove('autumn');
	            box.classList.remove('winter');
	            sel.classList.remove('sprgin')
	            sel.classList.add('summer')
	            sel.classList.remove('autumn')
	            sel.classList.remove('winter')
	        } else if (this.value === ops[2].value) {
	            box.classList.add('autumn');
	            box.classList.remove('summer');
	            box.classList.remove('sprgin');
	            box.classList.remove('winter');
	            sel.classList.remove('sprgin')
	            sel.classList.remove('summer')
	            sel.classList.add('autumn')
	            sel.classList.remove('winter')
	        } else if (this.value === ops[3].value) {
	            box.classList.add('winter');
	            box.classList.remove('autumn');
	            box.classList.remove('summer');
	            box.classList.remove('sprgin');
	            sel.classList.remove('sprgin')
	            sel.classList.remove('summer')
	            sel.classList.remove('autumn')
	            sel.classList.add('winter')
	        }
	    }
	</script>
</body>
</html>